<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>码农</title>
    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/flexslider.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
	<section class="banner" role="banner">
        <header id="header" >
            <div class="header-content clearfix">
                <a class="logo" href="#"></a>
                <nav class="navigation" role="navigation">
                    <ul class="primary-nav">
                        <li><a href="#features">发展</a></li>
                        <li><a href="#works">爱好</a></li>
                        <li><a href="#teams">作品</a></li>
                        <li><a href="#testimonials">关于</a></li>
                        <li><a href="#download"  class="hidden">关于</a></li>
                    </ul>
                </nav>
                <a href="#" class="nav-toggle">菜单<span></span></a>
            </div><!-- header content -->
        </header><!-- header -->
        <div class="container">
            <div class="col-md-10 col-md-offset-1">
                <div class="banner-text text-center">
                    <h1>赵宇麒</h1>
                    <p>选一个方向，定一个时间，剩下的只管努力与坚持</p>
                    <a href="#" class="btn btn-large hidden">Find out more</a>
                </div><!-- banner text -->
            </div>
        </div>
    </section><!-- banner -->
    <section id="features" class="features section hidden">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-tools"></span>
                    <div class="feature-content">
                        <h5>Easily Customised</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-desktop"></span>
                    <div class="feature-content">
                        <h5>Responsive Ready</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-lightbulb"></span>
                    <div class="feature-content">
                        <h5>Modern Design</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-genius"></span>
                    <div class="feature-content">
                        <h5>Clean Code</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-briefcase"></span>
                    <div class="feature-content">
                        <h5>Ready to Ship</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 feature text-center">
                    <span class="icon icon-download"></span>
                    <div class="feature-content">
                        <h5>Download for Free</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- features -->

    <section id="works" class="works section no-padding">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-1.jpg" class="work-box">
                        <img src="images/work-1.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>设计</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-2.jpg" class="work-box">
                        <img src="images/work-2.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>音乐</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-3.jpg" class="work-box">
                        <img src="images/work-3.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>摄影</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-4.jpg" class="work-box">
                        <img src="images/work-4.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>户外</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-5.jpg" class="work-box">
                        <img src="images/work-5.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>游戏</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-6.jpg" class="work-box">
                        <img src="images/work-6.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>天文</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-7.jpg" class="work-box">
                        <img src="images/work-7.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>文学</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 work">
                    <a href="images/work-8.jpg" class="work-box">
                        <img src="images/work-8.jpg" alt="">
                        <div class="overlay">
                            <div class="overlay-caption">
                                <h5>美食</h5>
                            </div>
                        </div><!-- overlay -->
                    </a>
                </div>
            </div>
        </div>
    </section><!-- works -->

    <section id="teams" class="section teams hidden">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="person">
                        <img src="images/team-1.jpg" alt="" class="img-responsive">
                        <div class="person-content">
                            <h4>Ruth Wood</h4>
                            <h5 class="role">Founder, CEO</h5>
                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                        </div>
                        <ul class="social-icons clearfix">
                            <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                            <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                            <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                            <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
                            <li><a href="#"><span class="fa fa-dribbble"></span></a></li>
                        </ul>
                    </div><!-- person -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="person">
                        <img src="images/team-2.jpg" alt="" class="img-responsive">
                        <div class="person-content">
                            <h4>Timothy Reed</h4>
                            <h5 class="role">Co-Founder, Developer</h5>
                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                        </div>
                        <ul class="social-icons clearfix">
                            <li><a href="#" class=""><span class="fa fa-facebook"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-twitter"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-linkedin"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-google-plus"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-dribbble"></span></a></li>
                        </ul>
                    </div><!-- person -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="person">
                        <img src="images/team-3.jpg" alt="" class="img-responsive">
                        <div class="person-content">
                            <h4>Victoria Valdez</h4>
                            <h5 class="role">UI Designer</h5>
                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                        </div>
                        <ul class="social-icons clearfix">
                            <li><a href="#" class=""><span class="fa fa-facebook"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-twitter"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-linkedin"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-google-plus"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-dribbble"></span></a></li>
                        </ul>
                    </div><!-- person -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="person">
                        <img src="images/team-4.jpg" alt="" class="img-responsive">
                        <div class="person-content">
                            <h4>Beverly Little</h4>
                            <h5 class="role">Data Scientist</h5>
                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                        </div>
                        <ul class="social-icons clearfix">
                            <li><a href="#" class=""><span class="fa fa-facebook"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-twitter"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-linkedin"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-google-plus"></span></a></li>
                            <li><a href="#" class=""><span class="fa fa-dribbble"></span></a></li>
                        </ul>
                    </div><!-- person -->
                </div>
            </div>
        </div>
    </section><!-- teams -->

    <section id="testimonials" class="section testimonials no-padding hidden">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <div class="col-md-6">
                                <div class="avatar">
                                    <img src="images/testimonial-1.jpg" alt="" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <blockquote>
                                    <p>"Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Aenean eu leo quam..."
                                    </p>
                                    <cite class="author">Susan Sims, Interaction Designer at XYZ</cite>
                                </blockquote>
                            </div>
                        </li>
                        <li>
                            <div class="col-md-6">
                                <div class="avatar">
                                    <img src="images/testimonial-2.jpg" alt="" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <blockquote>
                                    <p>"Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur...."
                                    </p>
                                    <cite class="author">Susan Sims, Interaction Designer at XYZ</cite>
                                </blockquote>
                            </div>
                        </li>
                    </ul>
                </div><!-- flexslider -->
            </div>
        </div>
    </section><!-- testimonials -->

    <section id="download" class="section download hidden">
        <div class="container">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h3>Are You Ready to Start? Download Now For Free!</h3>
                <p>Fusce dapibus, tellus ac cursus commodo</p>
                <a href="https://github.com/kamalcha/ActiveBox/archive/master.zip" class="btn btn-large">Download for Free</a>
            </div>
        </div>
    </section><!-- download -->

    <section id="download-wordpress" class="section download wordpress hidden">
        <div class="container">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h3>Download as WordPress theme</h3>
                <p>This template also available as WordPress theme</p>
                <a href="https://github.com/nguyenvanduocit/ActiveBox/archive/master.zip" class="btn btn-large animated tada">Download Now</a>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="footer-col col-md-4">
                        <h5>位置</h5>
                        <p>广东省<br>广州市番禺区番山创业中心</p>
                    </div>
                    <div class="footer-col col-md-4 hidden">
                        <h5>Share with Love</h5>
                        <ul class="footer-share">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="https://twitter.com/kamal_chaneman"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="https://www.linkedin.com/in/kamalchaneman"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                    <div class="footer-col col-md-4">
                        <h5>勤学</h5>
                        <p>学向勤中得，萤窗万卷书。<br/>三冬今足用，谁笑腹空虚。</p>
                    </div>
                </div>
            </div>
        </div><!-- footer top -->
        <div class="footer-bottom">
            <div class="container">
                <div class="col-md-12">
                    <p>Copyright © 2015 YuQi. All Rights Reserved<br>Made with <i class="fa fa-heart pulse"></i> by <a target="_blank" href="http://github.com/getpro/">YuQi</a></p>
                </div>
            </div>
        </div>
    </footer><!-- footer -->

    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/flexslider/2.5.0/jquery.flexslider-min.js"></script>
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="//cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="//cdn.bootcss.com/retina.js/2.1.1/retina.min.js"></script>
    <script src="//cdn.bootcss.com/modernizr/2010.07.06dev/modernizr.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>